import ReactDOM from 'react-dom'
import React, { Component } from 'react'

// 兄弟组件
import Jack from './Jack'
import Rose from './Rose'

// 根组件
class App extends Component {
  // 状态提升概念：由最近的父组件来管理状态和修改状态的函数，子组件通过props使用完成兄弟组件通讯
  // 状态
  state = {
    msg: ''
  }
  // 修改状态的函数
  updateMsg = msg => {
    this.setState({ msg })
  }

  render() {
    return (
      <>
        {/* jack 传递数据给 rose */}
        <Jack updateMsg={this.updateMsg} />
        <Rose msg={this.state.msg} />
      </>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))